@charset "utf-8";
@import  "common/reset";
@function r($px){
    @return $px/100+rem;
};
html,body,.mobile{
    height: 100%;
}
body{
    position: relative;
    overflow: hidden;
}
section{
    width: 100%;
    position: absolute;
    top: r(90);
    bottom:r(97);
    overflow: auto;
}
.seven{
    bottom: 0 !important; 
}
.mobile{
    header{
        position: absolute;
        overflow: hidden;
        width: 100%;
        height:r(90) ;
        background: #b20000;
        .login{
            float: left;
            margin-left: r(23);
            margin-top: r(27);
            list-style-type:square ;
            li{
                width: r(30);
                height: r(4);
                list-style-type:square ;
                background: #FFFFFF;
                color: #fff;
                margin-top: r(6);
                height: r(4);
                position:relative; 
                &::before{
                    content: "";
                    display: inline-block;
                    position: absolute;
                    top: 0;
                    left: r(-6);
                    width: r(4);
                    height: r(4);
                    background: #fff;
                }
            }
        }//login
        
        .logo{
            float: left;
            width: r(264);
            height: r(39);
            overflow: hidden;
            font-size: 0;
            margin-left: r(133);
            margin-top: r(25);
            img{
                width: 100%;
            }
        }//logo
        .search{
            float: right;
            width: r(42);
            height: r(42);
            font-size: 0;
            margin-top: r(25);
            margin-right: r(17);
            img{
                width: 100%;
            }
        }
    }//header
    
    //登陆窗口
    #check{
        display: none;
    }
    .loginBox{
        padding: r(3);
        z-index: 2;
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        background: #222222;
        transform: translateX(-100%);
        transition: 0.5s;
        .loginBox_header{
                overflow:hidden;
            .back{
                float: left;
                display: block;
                width: r(43);
                height:r(43);
                font-size: r(43);
                line-height: r(43);
                background: #b60005;
                text-align: center;
                border-radius:50% ;
                color: white;
                margin-left: r(50);
                margin-top: r(33);
            }
            .search_login{
//              overflow: hidden;
                float: right;
                margin-top:r(30);
                width: r(420);
                margin-right:r(80);
                height: r(50);
                line-height: r(50);
                border: r(1) solid #fff;
                border-radius: r(20);
                
                a{
                    float: left;
                    color: #fff;
                    margin-left:r(20);
                    margin-right:r(10);
                }
                input[type="text"]{
                    float: left;
//                  outline: none;
                    border: none;
                    width: r(300);
                    height: r(23);
                    margin-top: r(15);
                    color: white;
                    background: transparent;
                }
            }
            
            hr{
                margin: r(3) auto 0;
                width: 98%;
            }
        }//loginBox_header
        .loginBox_conten{
                width:r(146);
//              height: r(239);
                margin: r(115) auto 0;
                .img{
                    margin: 0 auto;
                    img{
                        width: r(146);
                        height: r(146);
                        border-radius:50% ;
                    }
                }
                p{
                    text-align: center;
                    a{
                        font-size: r(26);
                        color: #fff;
                        margin-top: 0 !important;
                    }
                }
                a{
                    display: block;
                    color: #4b4b4b;
                    font-size: r(20);
                    text-align: center;
                    list-style: inherit;
                    margin-top: r(10);
                }
            }//loginBox_conten
            .p2{
                width: 100%;
                height: r(30);
                background: #303030;
                margin-top: r(50);
            }
            .loginBox_ul{
                width: 90%;
                overflow: hidden;
                margin: r(20) auto 0;
                input{
                    display: none;
                }
                input:checked~label li .img2{
                    display: block;
                }
                input:checked~label li .img1{
                    display:none;
                }
                li{
                    height: r(60);
                    margin-bottom: r(20);
                    border-bottom: r(1) solid gray;
                    a{
                        color: white;
                        font-size: r(26);
                        float: left;
                    }
                    img{
                        float: right;
                    }
                    .img2{
                        display: none;
                    }
                }
                .li_ul{
                    display: none;
                    color: #FFFFff;
                    font-size: r(26);
                    text-align: center;
                    li{
                        border: none;
                        width: 50%;
                        margin: 0 auto;
                        line-height: r(60);
                    }
                    hr{
                        width: 50%;
                        margin: 0 auto;
                    }
                }
                input:checked~ul{
                    display: block;
                }
                
            }
    }//loginBox
    #check:checked~.loginBox{
        transform: translateX(0);
    }
    
  //跳转登录窗口  
  #login{
      display: none;
  }
  #login:checked~.loginbox{
      display: block;
  }
    .loginbox{
        width: 100%;
        height: 100%;
        background: #222222;
        position: fixed;
        top: 0;
        display: none;
        padding: r(20);
        .img{
            width: r(250);
            margin: r(60) auto;
            img{
                height: r(200);
                width: 100%;
            }
        }//img
        .yonghuming,.password{
            width: 80%;
            height: r(70);
            margin: 0 auto r(30);
            font-size: 0;
            line-height: r(70);
            input{
                margin: 0;
            }
            .left,.right{
                display: inline-block;
            }
            .left{
                width: 20%;
                height: r(72);
                vertical-align: middle;
                background-color:#303030 ;
            }
            .right{
                width: 80%;
                height: r(72);
                vertical-align: middle;
            }
            .img1{
                width: 80%;
                height: 100%;
                margin: 0 auto;
                vertical-align: middle;
                background: url(../../img/use-name.png)no-repeat center center;
                background-size:50% ;                
            }
            .img2{
                width: 80%;
                height: 100%;
                margin: 0 auto;
                vertical-align: middle;
                background: url(../../img/suo.png)no-repeat center center;
                background-size:50% ;
            }
            input[type="text"],input[type="password"]{
                width: 100%;
                height: 100%;
                background: #3d3d3d;
                padding: r(2) r(30);
                border: none;
                color: white;
            }
        }//验证码
        p{
            width: 80%;
            margin: r(10) auto;
            text-align: right;
            color: white;
            font-size: r(30);
            height: r(40);
            line-height: r(40);
            margin-bottom: r(54);
            
            img{
                width: r(32);
                height: r(32);
                line-height: r(40);
                vertical-align: middle;
            }
        }//p
        .login_button,.register_button{
            width: 80%;
            height: r(78);
            margin: 0 auto r(20);
            line-height: r(78);
            border: r(1) solid red;
            background: #303030;
            cursor: pointer;
            text-align: center;
            a{
                display: block;
                color: white;
                height: 100%;
                font-size: r(32);
            }
            &:hover{
                background: red;
            }
        }
        
    //用户界面
        #userA{
            display: none;
        }
        #userA:checked~.useInformation{
            display: block;
        }
        .useInformation{
            padding: r(10);
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            background: #222222;
            display: none;
            overflow: hidden;
           .back{
                float: left;
                display: block;
                width: r(60);
                height:r(60);
                font-size: r(60);
                line-height: r(60);
                background: #b60005;
                text-align: center;
                border-radius:50% ;
                color: white;
                margin-left: r(10);
                margin-top: r(20);
            } 
            hr{
                width: 96%;
                margin: r(100) auto r(50);
            }
            
                .tuichu{
                    margin: r(21) auto;
                    width: r(200);
                    height: r(50);
                    border-radius:r(20) ;
                    background: red;
                    text-align: center;
                    line-height: r(50);
                    font-size: r(25);
                    a{
                        color: white;
                    }
                }
        .loginBox_conten{
                width: 100%;
                margin:0 auto ;
                .touxiang{
                    width:r(146);
                    margin: 0 auto;
                    text-align: center;
                    .img{
                        width:100%;
                        margin: 0 auto;
                        position:relative;
                        img{
                            width: r(146);
                            height: r(146);
                            border-radius:50% ;
                        }
                        &:after{
                            content: "1";
                            display: block;
                            position: absolute;
                            top: 0;
                            right: r(10);
                            width: r(30);
                            height: r(30);
                            line-height: r(30);
                            border-radius:50%;
                            background: red;
                            color: white;
                            font-size: r(25);
                            text-align: center;
                        }
                    }//img
                }//头像
                ul{
                    li{
                        width: 100%;
                        font-size: r(27);
                        margin-bottom: r(10);
                        color: white;
                        text-align: center;
                        small{
                            font-weight: bold;
                            vertical-align: middle;
                            margin: 0 r(10) ;
                        }
                        input[type="button"]{
//                          width: r(85);
                            height: r(40);
                            font-size: r(20);
                            vertical-align: middle;
                            background: none;
                            color: white;
                            border: r(1) solid white;
                            text-align: center;
                            line-height: r(40);
                            padding:0  r(10);
                            
                        }
                        img{
                            width: r(24);
                            height: r(24);
                        }
                        a{
                            color: red;
                            display: inline-block;
                            font-size: r(25);
                        }
                        .btn1,.btn2{
                            width: r(180);
                            height: r(35);
                            line-height: r(35);
                            font-size: r(26);
                            color: white;
                            border-radius: r(26);
                            text-align: center;
                            &:hover{
                                background: #b60005 !important;
                            }
                        }
                    }
                }
        }//loginBox_conten
            .p3{
                width: 100%;
                height: r(30);
                background: #303030;
//              margin-top: r(50);
            }
            .loginBox_ul{
                width: 90%;
                overflow: hidden;
                margin: r(20) auto 0;
                .input_li{
                    display: none;
                }
                input:checked~label li .img2{
                    display: block;
                }
                input:checked~label li .img1{
                    display:none;
                }
                li{
                    height: r(60);
                    margin-bottom: r(20);
                    border-bottom: r(1) solid gray;
                    a{
                        color: white;
                        font-size: r(26);
                        float: left;
                    }
                    img{
                        float: right;
                    }
                    .img2{
                        display: none;
                    }
                }
                .li_ul{
                    display: none;
                    color: #FFFFff;
                    font-size: r(26);
                    text-align: center;
                    li{
                        border: none;
                        width: 50%;
                        margin: 0 auto;
                        line-height: r(60);
                    }
                    hr{
                        width: 50%;
                        margin: 0 auto;
                    }
                }
                .input_li:checked~ul{
                    display: block;
                }
                
            }
        }//useInformation
    }//loginbox
    
    
    
    
    
    
    
    
    
    
    
//弹出窗口—搜索
    
    #check_search{
        display: none;
    }
    #check_search:checked~.search_Box{
        transform: translateY(0);
    }
    .search_Box{
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 2;
        background:#f1f1f1;
        transform: translateY(-100%);
        transition: 0.5s;
        padding: r(20);
         .searchBox_header{
                overflow:hidden;
                background: #000000;
                padding-bottom:r(20) ;
            .back{
                float: left;
                display: block;
                width: r(43);
                height:r(43);
                font-size: r(43);
                line-height: r(43);
                background: #b60005;
                text-align: center;
                border-radius:50% ;
                color: white;
                margin-left: r(30);
                margin-right: r(10);
                margin-top: r(33);
            }
            .search_login{
//              overflow: hidden;
                float: right;
                margin-top:r(30);
                width: r(420);
                margin-right:r(80);
                height: r(50);
                line-height: r(50);
                border: r(1) solid #fff;
                border-radius: r(20);
                
                a{
                    float: left;
                    color: #fff;
                    margin-left:r(20);
                    margin-right:r(10);
                }
                input[type="text"]{
                    float: left;
//                  outline: none;
                    border: none;
                    width: r(300);
                    height: r(23);
                    margin-top: r(15);
                    color: white;
                    background: transparent;
                }
            }//search_login
            
        }//searchBox_header
        h1{
            text-align: left;
            color: #000;
            font-size: r(29);
            margin-top: r(36);
            margin-bottom: r(19);
        }
        ul{
            li{
                float: left;
                height: r(64);
                line-height: r(0);
                text-align: center;
                border: r(1) solid #dddddd;
                padding: r(10) r(15);
                margin-right: r(9);
                margin-bottom: r(11);
                &:hover{
                    background: red;
                    a{
                        color:white;
                    }
                }
                a{
                    font-size: r(31);
                    color: #8b8b8b;
                }
            }
        }
    }//search_Box
    
}//mobile



footer{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: r(97);
    background: #f5f5f5;
    border-top: r(1) solid #c8c6c7;
    ul{
        width: 100%;
        li{
            width: 20%;
            float: left;
            text-align: center;
            cursor:pointer;
            display:inline-block;   
            a{
                display: block;
                color: #8b8b8b;
                font-size: r(19);
            }
             a:first-child{
                font-size: r(49);
                margin-top:r(16) ;
             }
             img{
                 width: r(49);
                 height: r(41);
             }
             .a1{
                 color: red;
             }
        }
    }
    
}

